<template>
  <div :class="prefixCls" class="h-full">
    <HTabs
      :isDarg="preview"
      class="px-4"
      v-model:active="activeRef"
      :dataSource="dataSource"
      @change="changeType"
      ref="hTablsRef"
    >
      <template #tab="{ label, idx }">
        <div class="relative">
          <span> {{ label }} </span>
          <div
            @click.stop="handleDel(idx)"
            v-if="preview"
            class="close absolute -top-10px -right-20px"
          >
            <Icon icon="ant-design:close-outlined" />
          </div>
        </div>
      </template>
      <template #extra>
        <ButtonActions
          @save="handle"
          @custom="handle"
          :data="buttons"
          v-if="buttons && buttons.length"
        />
      </template>
    </HTabs>
    <template v-for="(item, idx) in dataSource" :key="idx">
      <ScrollContainer
        class="model-container"
        v-if="activeIdx === idx"
        :style="{ height: `calc(100% - ${TabHeight}px)` }"
      >
        <!-- 复合组件分发 -->
        <ComModelPage
          :data="item"
          :setActiveIndex="setActiveIndex"
          @detail="getDetails"
          :searchDefaultParam="searchDefaultParam"
          :dataSource="dataSource"
        />
      </ScrollContainer>
    </template>
    <FlowListModel
      @register="registerFlowModel"
      @success="openFlowListSuccess"
      :btnItem="btnInfo"
    />

    <FlowDetail
      :style="{ left: width, width: `calc(100vw - ${width})` }"
      class="custom-flow-detail"
      v-model:visible="flowDetailVisible"
      ref="flowDetail"
      @success="handleSuccess"
    />
  </div>
</template>

<script lang="ts" setup name="TabsPage">
  import { PropType, ref, watch, computed, unref } from 'vue';
  import ButtonActions from '/@/components/ModelTable/src/components/ButtonActions.vue';
  import ComModelPage from '../components/ComModelPage.vue';
  import { ScrollContainer } from '/@/components/Container';

  import { useComplexContext } from '../useComplexContext';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { HTabs } from '/@/components/HTabs';
  import { Icon } from '/@/components/Icon';
  import FlowListModel from '../components/FlowListModel.vue';
  import FlowDetail from '/@/components/FlowTable/src/components/FlowDetail.vue';
  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';

  import { useModal } from '/@/components/Modal';

  const props = defineProps({
    preview: Boolean,
    active: Number,
    dataSource: {
      type: Array as PropType<any[]>,
      default: () => [],
    },
    buttons: {
      type: Array as PropType<any[]>,
      default: () => [],
    },
  });

  const emit = defineEmits(['update:active', 'change', 'del', 'detail', 'refresh']);

  const { getSilderWidth } = useMenuSetting();
  const width = computed(() => {
    return unref(getSilderWidth);
  });
  const { prefixCls } = useDesign('h-complex-tabs');
  const activeRef = ref();
  const btnInfo = ref({});
  const hTablsRef = ref<any>(null);
  const { parentQuery, parentParam, isUpdate, record, moduleId } = useComplexContext();
  // 流程申请
  const btnItemTemp = ref<any>(null);
  function handle(btnItem) {
    console.log(
      '%cparentQuery, parentParam, isUpdate, record,  moduleId===>64： ',
      'background: rgb(23, 197, 237,.6); color: #ff5023; font-size:18px;font-weight:700',
      parentQuery,
      parentParam,
      isUpdate,
      record,
      moduleId,
    );
    btnItemTemp.value = { ...btnItem };
    btnInfo.value = btnItem;
    openFlowListModal(true, {});
  }

  const TabHeight = computed(() => {
    let height = 0;
    if (hTablsRef.value) {
      height = hTablsRef.value.getTabsHeight();
    }

    return height;
  });

  const flowDetailVisible = ref<boolean>(false);
  const flowDetail = ref();
  const [registerFlowModel, { openModal: openFlowListModal }] = useModal();
  function openFlowListSuccess(id) {
    flowDetailVisible.value = true;
    if (flowDetail.value) {
      flowDetail.value?.openPage(true, { templateId: id, ...btnItemTemp.value, fieldsMap: record });
    }
  }
  watch(
    () => props.active,
    (v) => {
      console.log('v--------------123-4---------', v, props.dataSource);
      const idx = v && v > -1 ? v : 0;
      activeRef.value = props.dataSource[idx].value;
    },
  );
  const setActiveIndex = (num: number) => {
    emit('update:active', num);
  };
  let searchDefaultParam = [];
  const getDetails = (val) => {
    emit('detail', val);
    searchDefaultParam = val;
  };

  const activeIdx = computed({
    get: () => {
      return props.active || 0;
    },
    set: (v) => {
      emit('update:active', v);
    },
  });
  function changeType(data, idx) {
    activeRef.value = data.value;
    activeIdx.value = idx;
    searchDefaultParam = [];
    emit('change', data);
  }
  function handleDel(idx) {
    emit('del', idx);
    activeIdx.value = idx > 1 ? idx - 1 : 0;
  }

  function handleSuccess() {
    emit('refresh');
  }
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-h-complex-tabs';

  .@{prefix-cls} {
    ::v-deep(.h-tab) {
      .close {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
      }

      &:hover {
        .close {
          opacity: 1;
          pointer-events: all;
        }
      }
    }

    // .model-container {
    //   height: calc(100% - 48px);
    // }

    // ::v-deep(.FlowDetail-box) {
    //   padding-bottom: 80px;
    // }
  }

  .custom-flow-detail {
    position: fixed;
    height: calc(100vh - 112px);
    top: 112px;
    background: #fff;
    z-index: 999;
  }
</style>
